<template>
  <block v-if="showButton">
    <button
      :size="size"
      class="ve-button"
      :style="[customStyle]"
      :class="[
        (loading && status == 'default') || disabled ? `disabled` : '',
        've-button-' + type,
        status ? 've-button-' + type + '__' + status : '',
      ]"
      :disabled="loading"
    >
      <div v-if="loading" id="loading" :style="[showLoadingStyle]"></div>
      <span v-if="$slots.icon" class="ve-button-icon">
        <slot name="icon" />
      </span>
      <slot />
    </button>
  </block>
</template>

<script>
  import { appConfig } from '@/config/index.js'
  export default {
    name: 've-button',
    props: {
      size: String, // default || mini || long
      type: {
        type: String, // default | primary | plain | link
        default: 'default',
      },
      disabled: {
        type: Boolean,
        default: false,
      },
      // 按钮权限 字符串
      permision: String,
      // 自定义样式，对象形式
      customStyle: {
        type: Object,
        default() {
          return {}
        },
      },
      status: {
        type: String,
        default: 'default',
      }, // success | warning | danger | gray
      loading: {
        type: Boolean,
        default: false,
      },
    },
    data() {
      return {
        loadingStyle: {
          danger: {
            border: '2rpx solid rgb(254, 97, 90)',
            borderTop: '2rpx solid transparent',
          },
          gray: {
            border: '2rpx solid rgba(132, 145, 168, 1)',
            borderTop: '2rpx solid transparent',
          },
          success: {
            border: '2rpx solid rgb(0, 180, 42)',
            borderTop: '2rpx solid transparent',
          },
        },
      }
    },
    computed: {
      showButton() {
        if (appConfig.asyncRoutes == false || !this.permision) {
          return true
        }
        return this.$store.getters.buttonMap.includes(this.permision)
      },
      showLoadingStyle() {
        // loading状态 根据文本颜色校验
        if (this.type === 'primary') {
          return {
            border: '2rpx solid #fff',
            borderTop: '2rpx solid transparent',
          }
        } else if (this.type === 'plain') {
          console.log(this.status)
          if (this.status !== 'default') {
            return this.loadingStyle[this.status]
          } else {
            return {
              border: '2rpx solid rgba(48, 114, 246, 0.3)',
              borderTop: '2rpx solid transparent',
            }
          }
        } else {
          return {
            border: '2rpx solid rgba(0, 0, 0, 0.3)',
            borderTop: '2rpx solid transparent',
          }
        }
      },
    },
  }
</script>

<style lang="scss" scoped>
  #loading {
    margin-right: 10rpx;
    border-radius: 50%;
    width: 20rpx;
    height: 20rpx;
    display: inline-block;
    animation: spin 2s linear infinite;
  }

  @keyframes spin {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
  // 16 进制
  // 0.35 => 59 0.30 => 4d
  .ve-button {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 40rpx;
    margin-right: 0;
    margin-left: 0;
    height: 84rpx;
    line-height: 84rpx;
    border-radius: 4rpx;
    box-sizing: border-box;
    font-size: 28rpx;
    font-weight: 400;

    /* #ifdef APP-PLUS */
    padding: 0 20px;
    height: 42px;
    line-height: 42px;
    border-radius: 2px;
    font-size: 14px;
    /* #endif */
    &-icon {
      margin-right: 16rpx;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    &-default {
      color: #1d2129;
      background-color: #f3f7ff;
      border: 2rpx solid transparent;

      &__default {
        &:not(.disabled) {
          &:active {
            background-color: #d5e3ff;
            border-color: transparent;
          }
        }
      }
    }

    &-link {
      color: #3072f6;
      background-color: #fff;

      &__default {
        // &:not(.disabled) {
        //   &:active {
        //     color: rgba(216, 220, 232, 1);
        //     background-color: #eaf2fe;
        //     border-color: transparent;
        //   }
        // }
        &.disabled {
          color: rgba(216, 220, 232, 1);
        }
      }
    }

    &-primary {
      color: #fff !important;
      background: #3072f6;

      &__default {
        &:not(.disabled) {
          &:active {
            color: #fff;
            background-color: #1a54c7;
            border-color: transparent;
          }
        }

        &.disabled {
          background: rgba(48, 114, 246, 0.3);
        }
      }

      &__success {
        color: #fff !important;
        background-color: rgb(0, 180, 42) !important;
        border-color: transparent !important;
      }
      &__warning {
        color: #fff !important;
        background-color: rgb(255, 125, 0) !important;
        border-color: transparent !important;
      }
      &__danger {
        color: #fff !important;
        background-color: rgb(245, 63, 63) !important;
        border-color: transparent !important;
      }
    }
    &-plain {
      color: #3072f6;
      background-color: #fff;
      border: 2rpx solid #3072f6;

      &__default {
        &:not(.disabled) {
          &:active {
            color: #2f86f6;
            background-color: #eaf2fe;
            border-color: #3072f6;
          }
        }

        &.disabled {
          color: rgba(48, 114, 246, 0.3);
          border: 2rpx solid rgba(48, 114, 246, 0.3);
        }
      }

      &__success {
        &:not(.disabled) {
          color: rgb(0, 180, 42);
          background-color: #fff;
          border-color: rgb(0, 180, 42);

          &:active {
            color: rgb(0, 180, 42);
            background-color: #eaf2fe;
            border-color: rgb(0, 180, 42);
          }

          // &.disabled {
          //   background: rgb(254, 97, 90);
          // }
        }
      }
      &__warning {
        &:not(.disabled) {
          color: rgb(255, 125, 0);
          background-color: #fff;
          border-color: rgb(255, 125, 0);

          &:active {
            color: rgb(255, 125, 0);
            background-color: #eaf2fe;
            border-color: rgb(255, 125, 0);
          }

          // &.disabled {
          //   background: rgb(254, 97, 90);
          // }
        }
      }
      &__danger {
        &:not(.disabled) {
          color: rgb(254, 97, 90);
          background-color: #fff;
          border-color: rgb(254, 97, 90);

          &:active {
            color: rgb(254, 97, 90);
            background-color: #eaf2fe;
            border-color: rgb(254, 97, 90);
          }

          // &.disabled {
          //   background: rgb(254, 97, 90);
          // }
        }
      }

      &__gray {
        &:not(.disabled) {
          color: rgba(132, 145, 168, 1);
          background-color: #fff;
          border-color: rgba(218, 219, 221, 1);

          &:active {
            color: rgba(132, 145, 168, 1);
            background-color: #eaf2fe;
            border-color: rgba(132, 145, 168, 1);
          }

          // &.disabled {
          //   background: rgba(132, 145, 168, 1);
          // }
        }
      }
    }

    &-danger {
      background: #fe615a;
      color: #ffffff !important;
      &.disabled {
        background: #fe615a4d;
      }
    }

    &::after {
      content: none;
    }
  }
  .ve-button[size='mini'] {
    display: inline-flex;
    height: 64rpx;
    line-height: 64rpx;
    font-size: 26rpx;
    padding: 0 20rpx;
  }
  .ve-button[size='tiny'] {
    display: inline-flex;
    height: 48rpx;
    line-height: 48rpx;
    font-size: 24rpx;
    padding: 0 12rpx;
  }

  .ve-button[size='long'] {
    width: 100%;
  }
</style>
